/**
 *  学习目标：Todos 案例
 */
import React from 'react';
import './styles/base.css';
import './styles/index.css';

export default class App extends React.Component {
  state = {
    list: JSON.parse(localStorage.getItem('todo-list')) || [],
    type: localStorage.getItem('todo-type') || 'all',
  };
  handleUpdateById = (id) => {
    const { list } = this.state;
    const newList = list.map((item) => {
      return {
        ...item,
        isDone: item.id === id ? !item.isDone : item.isDone,
      };
    });
    this.setState({
      list: newList,
    });
  };
  handleDelById = (id) => {
    const newList = this.state.list.filter((item) => {
      return item.id !== id;
    });
    this.setState({ list: newList });
  };
  handleUpdateType = (type) => {
    this.setState({ type });
  };
  handleClearDone = () => {
    const { list } = this.state;
    const newList = list.filter((item) => !item.isDone);
    this.setState({ list: newList });
  };
  handleAddTask = (task) => {
    const newList = [
      ...this.state.list,
      { id: Date.now(), isDone: false, task },
    ];
    this.setState({ list: newList });
  };
  handleCheckAll = (e) => {
    console.log(e.target.checked);
    const newList = this.state.list.map((item) => {
      return { ...item, isDone: e.target.checked };
    });
    console.log('newList  ----->  ', newList);
    this.setState({ list: newList });
  };
  componentDidUpdate() {
    const { list, type } = this.state;
    localStorage.setItem('todo-list', JSON.stringify(list));
    localStorage.setItem('todo-type', type);
  }
  render() {
    const { list, type } = this.state;

    const showList = list.filter((item) => {
      if (type === 'active') return !item.isDone;
      if (type === 'completed') return item.isDone;
      return true;
    });

    const isAll = !list.length ? false : list.every((item) => item.isDone);
    return (
      <section className="todoapp">
        {/* 头部 */}
        <Header handleAddTask={this.handleAddTask}></Header>
        {/* 主体 */}
        <Main
          list={showList}
          isAll={isAll}
          handleCheckAll={this.handleCheckAll}
          handleUpdateById={this.handleUpdateById}
          handleDelById={this.handleDelById}
        ></Main>
        {/* 底部 */}
        <Footer
          type={type}
          list={list}
          handleUpdateType={this.handleUpdateType}
          handleClearDone={this.handleClearDone}
        ></Footer>
      </section>
    );
  }
}
class Header extends React.Component {
  state = {
    task: '',
  };
  handleChange = (e) => {
    this.setState({ task: e.target.value });
  };

  handlekeyDown = (e) => {
    const { handleAddTask } = this.props;
    if (e.keyCode === 27) this.setState({ task: '' });
    if (e.keyCode === 13) {
      if (!this.state.task.trim()) {
        alert('任务不能为空');
        this.setState({ task: '' });
        return;
      }
      handleAddTask(this.state.task);
      this.setState({ task: '' });
    }
  };
  render() {
    const { task } = this.state;

    return (
      <header className="header">
        <h1>todos</h1>
        <input
          className="new-todo"
          placeholder="需要做什么"
          autoFocus
          value={task}
          onChange={this.handleChange}
          onKeyDown={this.handlekeyDown}
        />
      </header>
    );
  }
}

class Main extends React.Component {
  render() {
    const { list, handleUpdateById, handleDelById, isAll, handleCheckAll } =
      this.props;
    return (
      <section className="main">
        <input
          id="toggle-all"
          className="toggle-all"
          type="checkbox"
          onChange={handleCheckAll}
          checked={isAll}
        />
        <label htmlFor="toggle-all">全选</label>
        <ul className="todo-list">
          {list.map((item) => {
            return (
              <li className={item.isDone ? 'completed' : ''} key={item.id}>
                <div className="view">
                  <input
                    className="toggle"
                    type="checkbox"
                    onChange={() => handleUpdateById(item.id)}
                    checked={item.isDone}
                  />
                  <label>{item.task}</label>
                  <button
                    className="destroy"
                    onClick={() => handleDelById(item.id)}
                  ></button>
                </div>
              </li>
            );
          })}
        </ul>
      </section>
    );
  }
}

function Footer({ type, handleUpdateType, handleClearDone, list }) {
  const length = list.filter((item) => !item.isDone).length;
  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>{length}</strong> 剩余
      </span>
      <ul className="filters">
        <li>
          <a
            onClick={() => handleUpdateType('all')}
            className={type === 'all' ? 'selected' : ''}
            href="#/"
          >
            全部
          </a>
        </li>
        <li>
          <a
            onClick={() => handleUpdateType('active')}
            className={type === 'active' ? 'selected' : ''}
            href="#/active"
          >
            未完成
          </a>
        </li>
        <li>
          <a
            onClick={() => handleUpdateType('completed')}
            className={type === 'completed' ? 'selected' : ''}
            href="#/completed"
          >
            已完成
          </a>
        </li>
      </ul>
      <button className="clear-completed" onClick={handleClearDone}>
        清除已完成
      </button>
    </footer>
  );
}
